import styled from 'styled-components';
import style from '@/assets/global-style';

export const SliderContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: auto;
  background: white;
  // 后面的遮罩层
  .before {
    position: absolute;
    top: -300px;
    height: 400px;
    width: 100%;
    background: ${style['theme-color']};
  }
  /* 图片的容器 */
  .slider-container {
    position: relative;
    width: 98%;
    height: 160px;
    overflow: hidden;
    margin: auto;
    /* 解决 ios使用border-radius时失效 */
    -webkit-transform: rotate(0deg);

    -webkit-appearance:none;
    border-radius: 6px;

    /* 图片 */
    .slider-nav {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
    }
    /* swiper-pagination 分页器的激活时的颜色 */
    .swiper-pagination-bullet-active {
      background: ${style['theme-color']};
    }
  }
`;
